import React from "react"
import queryString from 'query-string'
import { Carousel, WingBlank, Tabs, WhiteSpace } from 'antd-mobile';
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Diantaipcss from "./style/index.module.css"
import "./style/index.module.css"
// import "./style/index.css"
import img1 from "./img/返回1.png"
import Videoplay from "./img/视频播放.png"
const tabs = [
    { title: '主播榜' },
    { title: '节目榜' },
];
class Diantaipaihang extends React.Component {
    state = {
        imgHeight: 176,
        zhoumozuanyong: [],
        zhoumozuanyong1: [],
        zhoumozuanyong2: [],
        zhoumozuanyong3: [],
    }
    img1fanhui() {
        // this.props.history.goBack()
        this.props.history.push("/Diantai")
    }
    componentWillMount() {
        fetch('http://106.13.33.47:4000/dj/program/toplist/hours')
            .then(body => body.json())
            .then(res => {
                for (var i = 0; i < 3; i++) {
                    (this.state.zhoumozuanyong).push(res.data.list[i])
                    this.setState({
                        // zhoumozuanyong:res.data
                    })
                }
                console.log(res.data.list[0]);
                console.log(res.data.list[1].program.mainSong.artists[0].name);
                console.log(res.data.list[1].program.mainSong.duration);
                console.log(res.data.list[2].program.mainSong);
                console.log(res.data.list[1].program.coverUrl);
                console.log(res.data.list[1].program.mainSong.name);
                console.log(res.data.list[1].program.id);
                console.log(this.state.zhoumozuanyong);
            })
        fetch('http://106.13.33.47:4000/dj/program/toplist/hours')
            .then(body => body.json())
            .then(res => {
                for (var i = 3; i < 6; i++) {
                    (this.state.zhoumozuanyong1).push(res.data.list[i])
                    this.setState({
                        // zhoumozuanyong:res.data
                    })
                }
            })
        fetch('http://106.13.33.47:4000/dj/program/toplist/hours')
            .then(body => body.json())
            .then(res => {
                for (var i = 6; i < 18; i++) {
                    (this.state.zhoumozuanyong2).push(res.data.list[i])
                    this.setState({
                        // zhoumozuanyong:res.data
                    })
                }
            })
        fetch('http://106.13.33.47:4000/dj/program/toplist/hours')
            .then(body => body.json())
            .then(res => {
                for (var i = 18; i < 30; i++) {
                    (this.state.zhoumozuanyong3).push(res.data.list[i])
                    this.setState({
                        // zhoumozuanyong:res.data
                    })
                }
            })
    }
    render() {
        let { zhoumozuanyong, zhoumozuanyong1, zhoumozuanyong2 , zhoumozuanyong3} = this.state
        return (
            <div>
                <div>
                    <img onClick={this.img1fanhui.bind(this)} className={Diantaipcss.img1} src={img1} alt="" />
                    <span className={Diantaipcss.divspan1}>主播排行榜</span>
                </div>
                <div >
                    <WhiteSpace />
                    <Tabs tabs={tabs} initialPage={0} animated={true} useOnPan={true} >
                        <div className={Diantaipcss.div2div11} style={{
                            display: 'flex', alignItems: 'center',
                            justifyContent: 'center', height: '1340px', backgroundColor: '#fff'
                        }}>
                            <div >
                                <div className={Diantaipcss.div2div2div2}>24小时榜></div>
                                {
                                    <ul className={Diantaipcss.div2div2ul}>
                                        {
                                            zhoumozuanyong.map(item =>
                                                <li className={Diantaipcss.div2div2} key={item.program.id}>
                                                    <img className={Diantaipcss.div2div2img2} src={item.program.coverUrl} alt="" />
                                                    <span className={Diantaipcss.div2div2span2}>{item.program.mainSong.artists[0].name}</span>
                                                    <span className={Diantaipcss.div2div2span2}>{item.program.mainSong.duration}</span>
                                                </li>
                                            )
                                        }
                                    </ul>
                                }
                                <div className={Diantaipcss.div2div2div2}>新人榜></div>
                                {
                                    <ul className={Diantaipcss.div2div2ul}>
                                        {
                                            zhoumozuanyong1.map(item =>
                                                <li className={Diantaipcss.div2div2} key={item.program.id}>
                                                    <img className={Diantaipcss.div2div2img2} src={item.program.coverUrl} alt="" />
                                                    <span className={Diantaipcss.div2div2span2}>{item.program.mainSong.artists[0].name}</span>
                                                    <span className={Diantaipcss.div2div2span2}>{item.program.mainSong.duration}</span>
                                                </li>
                                            )
                                        }
                                    </ul>
                                }
                                <div className={Diantaipcss.div2div2hotzhubo}>最热主播</div>
                                {
                                    zhoumozuanyong2.map((item, index) => {
                                        return (
                                            <div className={Diantaipcss.song} key={index}>
                                                <div className={Diantaipcss.listgedandiv}>
                                                    <img className={Diantaipcss.listgedanimg} src={item.program.coverUrl} alt="" />
                                                </div>
                                                <div className={Diantaipcss.songLeft}>
                                                    <p className={Diantaipcss.name1}>{item.program.mainSong.artists[0].name}</p>
                                                    <p className={Diantaipcss.name2}>
                                                        {item.program.mainSong.artists[0].name}-&nbsp;-{item.program.mainSong.artists[0].name}</p>
                                                </div>
                                                <div className={Diantaipcss.songRight}>
                                                    <img src={Videoplay} alt="" className={Diantaipcss.videoImg} />
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div className={Diantaipcss.div2div1} style={{
                            display: 'flex', alignItems: 'center',
                            justifyContent: 'center', height: '1070px', backgroundColor: '#fff'
                        }}>
                            <div>
                                <div className={Diantaipcss.div2div2div1}>24小时榜></div>
                                {
                                    <ul className={Diantaipcss.div2div2ul}>
                                        {
                                            zhoumozuanyong.map(item =>
                                                <li className={Diantaipcss.div2div2} key={item.program.id}>
                                                    <img className={Diantaipcss.div2div2img1} src={item.program.coverUrl} alt="" />
                                                    <span className={Diantaipcss.div2div2span1}>{item.program.mainSong.name}</span>
                                                </li>
                                            )
                                        }
                                    </ul>
                                }
                                <div className={Diantaipcss.div2div2hotzhubo}>最热主播</div>
                                {
                                    zhoumozuanyong3.map((item, index) => {
                                        return (
                                            <div className={Diantaipcss.song} key={index}>
                                                <div className={Diantaipcss.listgedandiv}>
                                                    <img className={Diantaipcss.listgedanimg} src={item.program.coverUrl} alt="" />
                                                </div>
                                                <div className={Diantaipcss.songLeft}>
                                                    <p className={Diantaipcss.name1}>{item.program.mainSong.artists[0].name}</p>
                                                    <p className={Diantaipcss.name2}>
                                                        {item.program.mainSong.artists[0].name}-&nbsp;-{item.program.mainSong.artists[0].name}</p>
                                                </div>
                                                <div className={Diantaipcss.songRight}>
                                                    <img src={Videoplay} alt="" className={Diantaipcss.videoImg} />
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>

                        </div>
                    </Tabs>
                    <WhiteSpace />
                </div>
            </div>
        )
    }
}
export default Diantaipaihang